<template>
	<view class="container">
		<!-- 头部页签 -->
		<view class="header" ref="tabRef">
			<my-tab :tabData="tabData" :tabCurrent="tabCurrent" @handleClick="handleTabClick"></my-tab>
		</view>
		<!-- 数据表格 -->
		<view class="content">
			<view class="table-head">
				<u-table>
					<u-tr>
						<u-th v-for="(col,colIndex) in tableDatas.columns" :key="colIndex+'-'+tabCurrent"
							:width="col.width">
							<u-checkbox v-if="col.prop==='isChecked'" v-model="selectAllData"
								@click.native="selectAll(0)"></u-checkbox>
							<template v-else>{{col.label}}</template>
						</u-th>
					</u-tr>
				</u-table>
			</view>
			<view class="table-body">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower()"
					:lower-threshold="3">
					<u-table font-size="24">
						<u-tr v-for="(row,rowIndex) in tableDatas.datas" :key="rowIndex+'-'+tabCurrent">
							<u-td :class="{alignLeft: col.prop!=='DeliveryDate' }"
								v-for="(col,colIndex) in tableDatas.columns" :key="colIndex" :width="col.width">
								<u-checkbox v-if="col.prop==='isChecked'" v-model="row.isChecked"></u-checkbox>
								<template v-else-if="col.prop==='DeliveryDate'">
									{{ formatDate(row[col.prop],'mm-dd')}}
								</template>
								<template v-else>{{ row[col.prop] }}</template>
							</u-td>
						</u-tr>
						<u-loadmore :status="tableDatas.loadmoreVisible" @loadmore="loadMore()" color="#3e82f9" />
					</u-table>
				</scroll-view>
			</view>
		</view>

		<view class="btn-part" v-if="hasPermission">
			<template v-for="(item,index) in buttonList">
				<template v-if="index===tabCurrent">
					<u-button v-for="(bItem,bIndex) in item" :type="bItem.type" :disabled="bItem.disabled"
						:key="index+'-'+bIndex" @click="bItem.method">{{bItem.label}}</u-button>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 *  首页点击派工跳转页，选择订单跳转
	 */
	import myTab from '@/components/myTabs/index.vue'
	export default {
		components: {
			myTab
		},
		data() {
			return {
				tabData: ['派工中', '已完成', '已出货'],
				tabCurrent: 0,
				form: {
					page: 1,
					rows: 50,
				},
				tableDatas: {
					dicID: 50,
					datas: [],
					columns: [{
							prop: 'isChecked',
							label: '选择',
							width: '10%'
						}, {
							prop: 'SourceOrderNo',
							label: 'PO',
							width: '30%'
						},
						{
							prop: 'MaterialName',
							label: '名称',
							width: '40%'
						},
						{
							prop: 'DeliveryDate',
							label: '交期',
							width: '20%'
						},
						// {
						// 	prop: 'BOMCount',
						// 	label: '组件',
						// 	width: '10%'
						// },
						// {
						// 	prop: 'FishRate',
						// 	label: '进度',
						// 	width: '15%'
						// },

					],
					loading: false,
				},
				buttonList: [
					[{
							label: '进入派工',
							disabled: false,
							type: 'primary',
							method: this.toPage
						},
						{
							label: '安装完成',
							disabled: false,
							type: 'success',
							method: this.orderComplete
						},
					],
					[{
						label: '已出货',
						disabled: false,
						type: 'success',
						method: this.Shipped
					}, ],
				],
				selectAllData: false,
				hasPermission: false
			}
		},
		onLoad() {
			// this.getApsData()
			const resulut = this.$store.getters.userInfo.RoleMap?.some(val => val.RoleID === 'E01Admin' || val.RoleID ===
				'R2309260006') // 管理员和车间主管角色
			this.$set(this, 'hasPermission', resulut)
		},
		onShow() {
			this.dataSearch()
		},
		methods: {
			// 获取数据
			async getApsData(remark = 0) {
				const condition = {
					dicID: this.tableDatas.dicID,
					ParamsLabel: this.tabCurrent === 0 ? '派工中' : this.tabCurrent === 1 ? '已完成' : '已出货'
				}
				Object.assign(condition, this.form)
				this.tableDatas.loading = true
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				this.tableDatas.loading = false
				if (!res) return
				const {
					result,
					msg,
					data,
					count
				} = res
				if (!result) return uni.showToast({
					title: msg,
					icon: 'error'
				})
				if (res.result) {
					this.$set(this.tableDatas, 'count', count)
					if (!res.data.length) {
						this.setLoadmore('nomore')
					} else {
						this.tableDatas.datas.push(...res.data)
						this.setLoadmore('loadmore')
					}
				} else {
					return Promise.reject()
				}
			},
			// 查询数据
			dataSearch() {
				this.form.page = 1
				this.tableDatas.datas.length = 0
				this.getApsData()
			},
			// 进入派工 跳转
			toPage() {
				const selectData = this.tableDatas.datas.filter(val => val.isChecked)
				if (selectData.length !== 1) return uni.showToast({
					title: '请选择单行数据',
					icon: 'none'
				})
				const row = selectData[0]
				const url = '/pages/Isgo/OrderScheduling/OrderScheduling2'
				const {
					OrderNo,
					ProductionStatus,
					SourceOrderNo
				} = row
				const params = {
					OrderNo,
					ProductionStatus,
					SourceOrderNo
				}
				this.$u.route({
					url,
					params: {
						row: JSON.stringify(params)
					}
				})
			},
			// 安装完成
			orderComplete() {
				const selectData = this.tableDatas.datas.filter(val => val.isChecked)
				if (!selectData?.length) return uni.showToast({
					title: '请选择数据',
					icon: 'none'
				})
				uni.showModal({
					title: '提示',
					content: `确认指定PO【${selectData.map(val=>val.SourceOrderNo)}】安装完成吗？`,
					success: async (res) => {
						if (res.confirm) {
							// 用户点击确认
							selectData.forEach(val => {
								val.ProductionStatus = 25 // 安装完成状态 
							})
							const res = await this.$request.post({
								url: '/APSAPI/SaveData',
								data: selectData
							})
							if (res) {
								const {
									msg
								} = res
								this.dataSearch()
								uni.showToast({
									title: msg,
									icon: 'none'
								})
							}
						}
					}
				})
			},
			// 已出货
			Shipped() {
				const selectData = this.tableDatas.datas.filter(val => val.isChecked)
				if (!selectData?.length) return uni.showToast({
					title: '请选择数据',
					icon: 'none'
				})
				uni.showModal({
					title: '提示',
					content: `确认指定PO【${selectData.map(val=>val.SourceOrderNo)}】已出货完成吗？`,
					success: async (res) => {
						if (res.confirm) {
							// 用户点击确认
							selectData.forEach(val => {
								val.ProductionStatus = 12 // 出货状态 
							})
							const res = await this.$request.post({
								url: '/APSAPI/SaveData',
								data: selectData
							})
							if (res) {
								const {
									msg
								} = res
								this.dataSearch()
								uni.showToast({
									title: msg,
									icon: 'none'
								})
							}
						}
					}
				})
			},
			// 页签切换
			handleTabClick(index) {
				this.tabCurrent = index
				this.dataSearch()
			},
			// 表格滚动到底部
			scrolltolower() {
				this.loadMore()
			},
			// 加载更多
			loadMore() {
				if (this.tableDatas.loadmoreVisible === 'nomore') return
				this.form.page++
				this.getApsData()
			},
			//配置加载更多
			setLoadmore(status = 'loadmore') {
				const textMenu = {
					loadmore: '滑动或点击加载更多',
					loading: '加载中...',
					nomore: '已无更多数据',
				}
				this.$set(this.tableDatas, 'loadmoreVisible', status)
				this.$set(this.tableDatas, 'loadmoreText', textMenu[status])
			},
			//选择全部
			selectAll() {
				this.tableDatas.datas.forEach(val => {
					this.$set(val, 'isChecked', this.selectAllData)
				})
			},
			// 格式化日期
			formatDate(val, format = 'yyyy-mm-dd') {
				return this.$u.timeFormat(new Date(val), format)
			},
		},

	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.header {
			height: 80rpx;
			// border-bottom: 1px solid $uni-border-color;
		}

		.content {
			height: calc(100vh - 176rpx);
			width: 100%;
			// flex: 1;
			display: flex;
			flex-direction: column;
			padding: 10rpx 10rpx 20rpx;
			overflow: hidden;

			.table-head {}

			.table-body {
				flex-grow: 1;
				width: 100%;
				overflow: hidden;

				uni-scroll-view {
					height: 100%;
				}

				.u-table {
					width: 100%;
					overflow-y: auto;
					overflow-x: hidden;
				}
			}


			.u-td,
			.u-th {
				// white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				min-width: 0 !important;
				/* 关键属性 */
				flex-shrink: 0 !important;
				/* 防止flex容器压缩 */
			}

			.u-td {
				height: auto !important;
			}
			.alignLeft{
				text-align: left !important;
			}

			.col-0 {
				// font-size: 18rpx !important;
				// white-space: pre-wrap !important;
			}

			.col-1 {
				// white-space: pre-wrap !important;
				// font-size: 18rpx !important;
				// font-weight: bold;
			}

			.col-4 {
				// color: red !important;
			}

			.col-edit {
				color: $uni-color-primary !important;
				text-decoration-line: underline;
			}

			.col-color-red {
				color: rgb(255, 84, 87) !important;
			}
		}

		.btn-part {
			// display: f;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			z-index: 10;
			background-color: $uni-bg-color;
		}
	}
</style>